/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      answer_message
 * @Description:    回复信息页面
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/2 4:38 下午
 * @UpdateDate:     2021/3/2 4:38 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

import { Button, message } from 'antd';
import { Editor } from '@tinymce/tinymce-react';
import { AppConfig } from '@/config/app_config';
import { initCodeLanguage } from '@/pages/admin/article/add_article';
import React, { useRef } from 'react';
import './style/answer_message.less';
import { IRouteComponentProps } from 'umi';
import { AnswerMessgaeApi } from '@/service/message_api';

export default (
  props: IRouteComponentProps<
    {},
    {
      article_id: string;
      id: string;
    }
  >,
) => {
  // 保存输入框内容
  const userContentRef = useRef<{ value: string }>({ value: '' });

  // 提交留言
  const submitMessage = async () => {
    const param = {
      parent_id: props.location.query.id,
      article_id: props.location.query.article_id,
      message_content: userContentRef.current.value,
    };
    console.log(param);
    AnswerMessgaeApi(param).then((model) => {
      if (model.success) {
        message.success('回复成功');
      }
    });
  };

  return (
    <div className="answer_main">
      {/*富文本编辑器*/}
      <Editor
        apiKey={AppConfig.TinyEditKey}
        cloudChannel="5-stable"
        disabled={false}
        id="blog.hellosu.top/admin"
        onEditorChange={(value) => {
          userContentRef.current.value = value;
        }}
        init={{
          language: 'zh_CN',
          height: '200px',
          min_height: 200,
          automatic_uploads: true,
          codesample_languages: initCodeLanguage,
          menubar: 'my1',
          plugins: 'codesample',
          toolbar: false,
          menu: {
            my1: { title: '我的菜单', items: 'codesample' },
          },
        }}
      />
      <Button
        className="answer_info_input_submit_button"
        onClick={submitMessage}
      >
        提交
      </Button>
    </div>
  );
};
